<template>
  <div id="video_detail">
    <div class="top">
      <HeaderC/>
    </div>
    <div class="body">
      <div class="body_left">
        <!--顶部标题和部分数据-->
        <div class="body_left_top">
          <h3>震惊！！！</h3>
          <span style="margin-left:5px;"><Icon type="logo-youtube" /></span>
          <span style="margin-left:5px;">{{video.playTime}}</span>
          <span><Icon type="ios-list-box" /></span>
          <span style="margin-left:5px;">0未知</span>
          <span><Icon type="ios-time" /></span>
          <span style="margin-left:5px;">{{video.upTime}}</span>
          <span><Icon type="md-alert" /></span>
          <span style="margin-left:5px;">版权申明</span>
        </div>
        <!--视频播放区-->
        <div class="video_play">
          <div class="video_play_center">
            <video-player
              ref="videoPlayer"
              class="vjs-big-play-centered vjs-control-bar"
              :playsinline="true"
              :options="playerOptions"
              @timeupdate="onPlayerTimeupdate($event)"
              @ready="playerReadied"
            ></video-player>
          </div>
          <!--功能区-->
          <!--弹幕-->
          <div class="danmu">
            <div style="font-size:10px;">弹幕</div>
            <i-switch size="small"></i-switch>
            <Input v-model="danmu" style="width:250px;"></Input><Button>发送</Button>
          </div>
          <div class="video_play_menu">
            <span @click="action_like" style="margin-left:5px;"><img v-if="like" src="../../assets/icon/已点赞.png" width="25px;" height="25px;"><img v-else src="../../assets/icon/同意.png" width="25px;" height="25px;">{{video.videoLike}}</span>
            <span @click="action_dislike"><img v-if="dislike" src="../../assets/icon/已不同意.png" width="25px;" height="25px;"><img v-else src="../../assets/icon/不同意.png" width="25px;" height="25px;">{{video.videoDislike}}</span>
            <span @click="action_save"><img v-if="save" src="../../assets/icon/已收藏.png" width="25px;" height="25px;"><img v-else src="../../assets/icon/收藏.png" width="25px;" height="25px;">{{video.videoSave}}</span>
            <span @click="action_share"><img v-if="share" src="../../assets/icon/已转发.png" width="25px;" height="25px;"><img v-else src="../../assets/icon/转发.png" width="25px;" height="25px;">{{video.videoShare}}</span>
            <span style="margin-left:500px;"><img src="../../assets/icon/投诉.png" width="25px;" height="25px;"></span>
          </div>
          <hr>
          <div class="labelArea">
            <div class="label">{{video.videoType}}</div>
          </div>
        </div>
        <!--视频评论区-->
        <div class="video_comments">
          <div class="video_comments_top">
            <h2>评论</h2>
          </div>
          <div class="video_comments_body">
            <div class="up_comment">
              <img src="../../assets/images/avatar.jpg" style="width:40px;height:40px;border-radius:50%;margin-left:10px;"><Input v-model="comment" placeholder="发布一条友善的评论" style="width:600px;height:40px;margin-left:15px;margin-right:15px;"></Input><Button>发布</Button>
            </div>
            <div class="comments_display">
              <div class="single_comment" v-for="sg in comments" :key="sg.id">
                <div class="comment_left">
                  <img src="../../assets/images/avatar.jpg" style="width:35px;height:35px;border-radius:50%;">
                </div>
                <div class="comment_right">
                  <div>up主呢称</div>
                  <div>评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容</div>
                  <div style="display:flex;flex-direction:row;">
                    <div>2020-12-01 18:56</div>
                    <div style="margin-left:20px;">
                      <span style="margin-left:10px;"><img src="../../assets/icon/同意.png" width="15px;" height="15px;"></span>
                      <span style="margin-left:10px;margin-right:10px;"><img src="../../assets/icon/不同意.png"width="15px;" height="15px;"></span>
                      <span style="color:blue;">回复</span>
                    </div>
                  </div>
                  <!--子评论-->
                  <div style="display:flex;flex-direction:row;">
                    <div class="comment_left">
                      <img src="../../assets/images/avatar.jpg" style="width:25px;height:25px;border-radius:50%;">
                    </div>
                    <div class="comment_right">
                      <div>up主呢称</div>
                      <div>子评论子评论子评论子评论子评论子评论子评论子评论子评论子评论子评论子评论子评论</div>
                      <div style="display:flex;flex-direction:row;">
                        <div>2020-12-01 18:56</div>
                        <div style="margin-left:20px;">
                          <span style="margin-left:10px;"><img src="../../assets/icon/同意.png" width="10px;" height="10px;"></span>
                          <span style="margin-left:10px;margin-right:10px;"><img src="../../assets/icon/不同意.png"width="10px;" height="10px;"></span>
                          <span style="color:blue;">回复</span>
                        </div>
                      </div>
                    </div>
                  </div>

                </div>
                <hr>
              </div>

            </div>

          </div>
        </div>
      </div>
      <div class="body_right">
        <!--up主信息-->
        <div class="up_info">
          <img src="../../assets/images/avatar.jpg" style="width:60px;height:60px;border-radius:50%;margin-left:10px;">
          <div class="up_info_right">
            <div style="line-height:30px;display:flex;flex-direction:row;">
              <div style="color:red;">
                up主昵称
              </div>
              <div class="up_sendMessage">
                <img src="../../assets/icon/邮件.png" style="width:25px;height:25px;">
              </div>
            </div>
            <div style="line-height:30px;">个性签名</div>
            <Button style="background-color:blue;width:250px;color:white;">+关注8.0万</Button>
          </div>
        </div>
        <!--弹幕列表-->
        <div class="danmu_list"></div>
        <!--推荐区-->
        <div class="recommend_video">
          <div class="recommend_top">
            <h3>接下来播放</h3>
            <div>
              自动连播
              <i-switch size="small"></i-switch>
            </div>
          </div>
          <div class="recommend_content">
            <div v-for="v in recommend" :key="v.id" class="recommend_single">
              <div class="recommend_cover">
                <img src="../../assets/images/register-background.jpeg" style="width:60px;height:60px;border-radius:10%;">
              </div>
              <div class="recommend_info">
                <div>up主昵称</div>
                <div>{{v.introduce}}</div>
                <div>
                  <span style="margin-left:5px;"><Icon type="logo-youtube" /></span>
                  <span style="margin-left:5px;">{{v.playTime}}</span>
                  <span><Icon type="ios-list-box" /></span>
                  <span style="margin-left:5px;">0未知</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import HeaderC from "@/components/User/HeaderC";
export default {
  name: "videoPLay",
  components:{HeaderC},
  // props:['url'],
  data() {
    return {
      videoName:'',
      like:false,//是否已点赞
      dislike:false,//是否已踩赞
      praise_type:0,//点踩类型  1为点赞  2为踩  3为取消点赞  4为取消踩
      save:false,//是否已收藏
      share:false,//是否已转发
      danmu:'',//弹幕
      comment:'',//评论
      comments:[1,2,3],//存放评论的数组
      recommend:[1,2,3],//推荐的视频
      playerOptions: {
        playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
        currentTime: "00:00",
        autoplay: false, //如果true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 导致视频一结束就重新开始。
        preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: "zh-CN",
        aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [
          {
            type: "video/mp4", //这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
            // src:require("../../../assets/vd.mp4"), //本地视频使用方式，本地图片引入亦如此
            //    this.playerOptions['sources'][0]['src'] = require('../../assets/videos/'+name)
            src:"http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"     //视频地址  http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4     this.playerOptions['sources'][0]['src'] = require('../../assets/videos/'+name)

          },
        ],
        poster:require("../../assets/images/register-background.jpeg"), //你的封面地址
        width: document.documentElement.clientWidth, //播放器宽度
        notSupportedMessage: "此视频暂无法播放，请稍后再试", //允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true,
          durationDisplay: true,
          remainingTimeDisplay: false,
          fullscreenToggle: true, //全屏按钮
        },
      },
      video:{},
      //一开始视频观看时长，可用于记录视频播放的时间，下一次直接从这个时间开始播放
      gklog: '',

    };
  },
  methods: {
    //视频快进
    goFast() {
      this.gklog += 5;
      // console.log(" 快进", this.gklog,this.$refs.videoPlayer);
      this.$refs.videoPlayer.player.currentTime(this.gklog)
    },
    //视频后退
    goBack() {
      this.gklog -= 5;
      // console.log(" 后退", this.gklog,this.$refs.videoPlayer);
      this.$refs.videoPlayer.player.currentTime(this.gklog);
    },
    /* 设置视频进度 */
    playerReadied(player) {
      player.currentTime(this.gklog);
      // console.log("视频初始时长",this.gklog)
    },

    onPlayerTimeupdate(player) {
      this.gklog = player.cache_.currentTime;//获取当前播放时间
      // console.log(" onPlayerTimeupdate!", this.gklog);
    },
    //视频点赞
    action_like(){
      //更改前端样式
      //该视频用户未点赞
      if(!this.like){
        //更改样式
        this.like = true
        if(this.dislike){
          this.dislike=false
          this.video.videoDislike = this.video.videoDislike -1
        }
        this.video.videoLike = this.video.videoLike +1
        this.praise_type = 1
      }
      //该视频用户已经点赞 变为点赞取消
      else{
        //更改样式
        this.like = false
        this.video.videoLike = this.video.videoLike -1
        this.praise_type = 3
      }
      console.log('点击赞')
      this.updatePraise(this.type)
      //跟新数据库数据
    },
    //视频踩赞
    action_dislike(){
      //该视频用户未踩赞
      if(!this.dislike){
        //更改样式
        this.dislike = true
        if(this.like){
          this.like =false
          this.video.videoLike = this.video.videoLike -1
        }
        this.video.videoDislike = this.video.videoDislike +1
        this.praise_type = 2
      }
      //该视频用户已经踩赞 变为踩赞取消
      else{
        //更改样式
        this.dislike = false
        this.video.videoDislike = this.video.videoDislike -1
        this.praise_type = 4
      }
      console.log('点击踩')
      this.updatePraise(this.type)
    },
    //跟新点赞数据
    updatePraise(){
      console.log('定时器触发')
      setTimeout(()=>{
        this.$http.get('/api/praiseVideo',{
          params:{
            videoId:this.video.id,
            userId:sessionStorage.getItem('userId'),
            type:this.praise_type
          }
        }).then(res=>{
          console.log(res)
        }).catch(error=>{
          console.log(error)
        })
      },10000)
    },
    //视频收藏
    action_save(){

    },
    //视频转发
    action_share(){

    }
  },
  watch:{
    gklog:function(){
    }
  },
  created(){
    let id = this.$route.query.id
    const videos = JSON.parse(sessionStorage.getItem('videos'))

    const idList = []
    for(let i=0; i<videos.length; i++){
      idList.push(videos[i].id)
    }
    let index = idList.indexOf(id)
    this.video = videos[index]
        switch(index){
      case 0:
        this.videoName = '娱乐'
        break
      case 1:
        this.videoName = '游戏'
        break
      case 2:
        this.videoName = '生活'
        break
      case 3:
        this.videoName = '知识'
        break
      case 4:
        this.videoName = '科技'
        break
      default:
        this.videoName = '美食'
    }
    this.playerOptions['sources'][0]['src'] = require('../../assets/videos/'+this.videoName+'.mp4')
    // let videoN = 'wx_camera_1639976793822.mp4'
    // this.playerOptions['sources'][0]['src'] = require(`"D:\\BingoUploadFile\\"+${videoN}`)
    videos.splice(index,1)
    this.recommend = videos
  },
  mounted(){
   // console.log('play被调用了')
  }
}
</script>
<style scoped>
.body{
  width:80%;
  margin-left:10%;
  margin-top:10px;
  display:flex;
  flex-direction:row;
}

.body_left{
  width:70%;
  display:flex;
  flex-direction:column;
}

.body_left_top{
  height:60px;
}

span{
  margin-left:10px;
}

.video_play{
  width:100%;
}

.video_play_center{
  width:98%;
}

.danmu{
  margin-top:2px;
  padding-left:5px;
  display:flex;
  flex-direction:row;
  height:50px;
  line-height:50px;
  align-items:center;
}

.video_play_menu{
  display:flex;
  flex-direction:row;
  height:40px;
  line-height:40px;
  align-items:center;
}

.video_play_menu span{
  margin-left:50px;
}

.labelArea{
  padding:10px;
}
.label{
  background-color: #eeeaea;
  border-radius:50%;
  width:50px;
  text-align:center;
}

.video_comments{
  margin-top:10px;
}

.video_comments_body{
  margin-top:10px;
  paddin-left:5px;
}
.up_comment{
  display:flex;
  flex-direction:row;
}
.comments_display{
  margin-top:15px;
}
.single_comment{
  margin-top:20px;
  margin-left:10px;
  display:flex;
  flex-direction:row;
}
.comment_right{

}

.body_right{
  width:30%;
  display:flex;
  flex-direction:column;
}

.up_info{
  display:flex;
  flex-direction:row;
}
.up_sendMessage:hover{
  color:blue;
}
.recommend_top{
  display:flex;
  flex-direction:row;
  justify-content:space-between;
  padding-left:10px;
}

.recommend_content{
  margin-left:10px;
}
.recommend_single{
  display:flex;
  flex-direction:row;
  margin-top:5px;
  width:350px;

}
.recommend_single:hover{
  background-color:#13227a;
  color:white;
}

</style>
